<!-- 布局 -->
<template>
    <!-- 对于选中项内容位置的调整 -->
    <div class="layoutContainer">
        <sliderNavs />
        <div class="layoutRightContainer" :style="{marginLeft:menuStore.isCollapse?'64px':'210px'}">
            <topNavs />
            <RouterView />
        </div>

    </div>
</template>

<script setup>
import sliderNavs from '../components/sliderNavs/index.vue'
import topNavs from '../components/topNavs/index.vue'
import { userMenuStore } from '../stores/menuStore';
import { onMounted } from 'vue';
import api from '../API/index'
import { userLoginStore } from '../stores/loginStore';
import { useRouter } from 'vue-router';
import manageRouter from '../router/dynamicRoute.js'

const menuStore=userMenuStore();
const userStore=userLoginStore();
const router =useRouter();

// 用户权限数据获取
onMounted(()=>{
    api.getRouter({
        user:userStore.permission
    }).then(res=>{
        console.log(res.data);
        if(res.data.status === 200){
            menuStore.menus=res.data.menuData.menus
            // 判断当前的用户权限
            if(userStore.permission === 'admin'){
                router.addRoute('layout',manageRouter)
            }
        }else{
            console.log('权限获取出错了');
            
        }
        
    })
})
// onMounted(() =>{
//     api.getRouter({
//         user:userStore.permission
//     }).then(res =>{
//         if(res.data.status === 200){
//             menuStore.menus = res.data.menuData.menus
//             // 判断当前用户权限
//             if(userStore.permission === "admin"){
//                 router.addRoute('layout',manageRouter)
//             }
//         }
//     }).catch(err =>{
//         console.log(err);
//     })
// })
</script>

<style scoped>
.layoutRightContainer {
    margin-left: 210px;
    transition: 0.3s ease-in;
}

</style>